<template>
  <view class="content">
    <!-- 选择收货地址的按钮 -->
    <view class="content-button" v-if="JSON.stringify(address) === '{}'">
      <button type="primary" size="mini" @tap="chooseAddress">请选择收货地址+</button>
    </view>
    <!-- info -->
    <view class="content-info" v-else @tap="chooseAddress">
      <view class="content-info-firstRow">
        <view class="left">
          <view class="name">
            收货人:<text>{{address.userName || ''}}</text>
          </view>
        </view>
        <view class="right">
          <view class="phone">
            电话:<text>{{address.telNumber || ''}}</text>
          </view>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>
      <view class="content-info-secondRow">
        <view class="left">
          收货地址:
        </view>
        <view class="right">
          {{ addStr || ''}}
        </view>
      </view>
    </view>
    <!-- 底部边框线 -->
    <view class="content-baseLine"></view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters 
  } from 'vuex'
  export default {
    name:"my-address",
    data() {
      return {
      };
    },
    computed: {
      ...mapState('m_user',['address']),
      ...mapGetters('m_user',['addStr'])
    },
    methods: {
      ...mapMutations('m_user',['updataAddress']),
      // 选择收货地址
       chooseAddress() {
           uni.chooseAddress({
             success: res => {
               this.updataAddress(res)
             },
             fail(err) {
               console.log('err:',err);
             }
           })
      }
    }
  }
</script>

<style lang="scss">
.content {
  &-button {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  &-info {
    font-size: 12px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5px;
    &-firstRow{
      display: flex;
      justify-content: space-between;
      .right {
        display: flex;
        align-items: center;
        
        .phone {
          margin-right: 5px;
        }
      }
    }
    &-secondRow {
      display: flex;
      align-items: center;
      margin-top: 10px;
      .left {
        white-space: nowrap;
      }
    }
  }
  
  &-baseLine {
    border-bottom: 1px solid #EEE;
  }
}
</style>
